<template>
    <view class="user-info-container">
      <!-- 头部区域 -->
      <view class="header">
        <view class="status-bar"></view>
        <view class="nav-bar">
          <view class="left" @tap="goBack">
            <image class="back-icon" src="/static/images/back.png" mode="aspectFit"></image>
          </view>
          <view class="title">个人信息</view>
          <view class="right"></view>
        </view>
      </view>
      
      <!-- 头像区域 -->
      <view class="avatar-section">
        <view class="avatar-wrapper" @tap="chooseImage">
          <image 
            class="avatar" 
            :src="userInfo.avatar ? getAvatar(userInfo.avatar) : defaultAvatar" 
            mode="aspectFill"
          ></image>
          <view class="avatar-edit-icon">
            <image class="camera-icon" src="/static/images/camera.png" mode="aspectFit"></image>
          </view>
        </view>
        <text class="avatar-tip">点击更换头像</text>
      </view>
      
      <!-- 表单区域 -->
      <view class="form-section">
        <!-- 用户名 -->
        <view class="form-item">
          <view class="form-label">
            <image class="form-icon" src="/static/images/user.png" mode="aspectFit"></image>
            <text class="label-text">用户名</text>
          </view>
          <input class="form-input" type="text" v-model="userInfo.name" placeholder="请输入用户名" />
        </view>
        
        <!-- 密码 -->
        <view class="form-item">
          <view class="form-label">
            <image class="form-icon" src="/static/images/lock.png" mode="aspectFit"></image>
            <text class="label-text">密码</text>
          </view>
          <input class="form-input" type="password" v-model="userInfo.password" placeholder="请输入密码" password />
        </view>
        
        <!-- 性别 -->
        <view class="form-item">
          <view class="form-label">
            <image class="form-icon" src="/static/images/gender.png" mode="aspectFit"></image>
            <text class="label-text">性别</text>
          </view>
          <view class="gender-selector">
            <view class="gender-option" :class="{'selected': userInfo.sex === '男'}" @tap="userInfo.sex = '男'">
              <image class="gender-icon" src="/static/images/male.png" mode="aspectFit"></image>
              <text>男</text>
            </view>
            <view class="gender-option" :class="{'selected': userInfo.sex === '女'}" @tap="userInfo.sex = '女'">
              <image class="gender-icon" src="/static/images/female.png" mode="aspectFit"></image>
              <text>女</text>
            </view>
          </view>
        </view>
        
        <!-- 生日 -->
        <view class="form-item">
          <view class="form-label">
            <image class="form-icon" src="/static/images/calendar.png" mode="aspectFit"></image>
            <text class="label-text">生日</text>
          </view>
          <view class="date-selector" @tap="showDatePicker">
            <text>{{userInfo.birth || '请选择生日'}}</text>
            <image class="arrow-icon" src="/static/images/arrow-right.png" mode="aspectFit"></image>
          </view>
        </view>
        
        <!-- 手机号 -->
        <view class="form-item">
          <view class="form-label">
            <image class="form-icon" src="/static/images/phone.png" mode="aspectFit"></image>
            <text class="label-text">手机号</text>
          </view>
          <input class="form-input" type="number" v-model="userInfo.phone" placeholder="请输入手机号" />
        </view>
        
        <!-- 个性签名 -->
        <view class="form-item signature-item">
          <view class="form-label">
            <image class="form-icon" src="/static/images/edit.png" mode="aspectFit"></image>
            <text class="label-text">个性签名</text>
          </view>
          <view class="signature-wrapper">
            <textarea class="signature-input" v-model="userInfo.sign" placeholder="介绍一下自己吧..." maxlength="50" />
            <view class="word-count">{{userInfo.sign ? userInfo.sign.length : 0}}/50</view>
          </view>
        </view>
      </view>
      
      <!-- 按钮区域 -->
      <view class="button-section">
        <button class="save-btn" @tap="updateUserInfo">保存修改</button>
        <button class="cancel-btn" @tap="goBack">取消</button>
      </view>
      
      <!-- 日期选择器弹窗 -->
      <view class="date-picker-popup" v-if="showDatePickerFlag">
        <view class="date-picker-mask" @tap="cancelDatePicker"></view>
        <view class="date-picker-content">
          <view class="date-picker-header">
            <text class="date-picker-cancel" @tap="cancelDatePicker">取消</text>
            <text class="date-picker-title">选择生日</text>
            <text class="date-picker-confirm" @tap="confirmDatePicker">确认</text>
          </view>
          <view class="date-picker-body">
            <picker-view 
              class="date-picker-view" 
              :value="datePickerValue" 
              @change="datePickerChange"
              indicator-style="height: 80rpx; border-top: 1rpx solid #f0f0f0; border-bottom: 1rpx solid #f0f0f0;"
              :mask-style="maskStyle"
            >
              <picker-view-column>
                <view class="picker-item" v-for="(year, index) in years" :key="'year-'+index">{{year}}年</view>
              </picker-view-column>
              <picker-view-column>
                <view class="picker-item" v-for="(month, index) in months" :key="'month-'+index">{{month}}月</view>
              </picker-view-column>
              <picker-view-column>
                <view class="picker-item" v-for="(day, index) in days" :key="'day-'+index">{{day}}日</view>
              </picker-view-column>
            </picker-view>
          </view>
        </view>
      </view>
    </view>
  </template>
  
  <script>
  export default {
    data() {
      return {
        userInfo: {},
        defaultAvatar: '/static/images/user/userIcon.png',
        // 日期选择器数据
        showDatePickerFlag: false,
        datePickerValue: [0, 0, 0],
        years: [],
        months: [],
        days: [],
        maskStyle: 'background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.4)), linear-gradient(0deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.4));'
      }
    },
    onLoad(options) {
      // 初始化日期选择器数据
      this.initDatePicker()
      
      // 加载用户信息
      if (options.UID) {
        this.loadUserInfo(options.UID)
      }
    },
    methods: {
      // 初始化日期选择器
      initDatePicker() {
        const currentYear = new Date().getFullYear()
        // 生成年份列表 (1990-2025)
        this.years = Array.from({length: 36}, (_, i) => 1990 + i)
        // 生成月份列表 (1-12)
        this.months = Array.from({length: 12}, (_, i) => i + 1)
        // 默认生成31天
        this.updateDays(31)
      },
      
      // 更新天数列表
      updateDays(daysInMonth) {
        this.days = Array.from({length: daysInMonth}, (_, i) => i + 1)
      },
      
      // 日期选择器变化事件
      datePickerChange(e) {
        const values = e.detail.value
        this.datePickerValue = values
        
        // 根据年月更新天数
        const year = this.years[values[0]]
        const month = this.months[values[1]]
        
        let daysInMonth = 31
        if ([4, 6, 9, 11].includes(month)) {
          daysInMonth = 30
        } else if (month === 2) {
          // 判断闰年
          daysInMonth = ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) ? 29 : 28
        }
        
        this.updateDays(daysInMonth)
      },
      
      // 显示日期选择器
      showDatePicker() {
        // 如果已有生日，设置选择器初始值
        if (this.userInfo.birth) {
          const [year, month, day] = this.userInfo.birth.split('-')
          const yearIndex = this.years.findIndex(y => y === parseInt(year))
          const monthIndex = this.months.findIndex(m => m === parseInt(month))
          const dayIndex = this.days.findIndex(d => d === parseInt(day))
          
          if (yearIndex !== -1 && monthIndex !== -1 && dayIndex !== -1) {
            this.datePickerValue = [yearIndex, monthIndex, dayIndex]
          }
        }
        
        this.showDatePickerFlag = true
      },
      
      // 取消日期选择
      cancelDatePicker() {
        this.showDatePickerFlag = false
      },
      
      // 确认日期选择
      confirmDatePicker() {
        const year = this.years[this.datePickerValue[0]]
        const month = this.months[this.datePickerValue[1]]
        const day = this.days[this.datePickerValue[2]]
        
        this.userInfo.birth = `${year}-${month}-${day}`
        this.showDatePickerFlag = false
      },
      
      // 返回上一页
      goBack() {
        uni.navigateBack()
      },
      
      // 获取头像完整路径
      getAvatar(path) {
        return 'http://localhost:9090' + path
      },
      
      // 选择图片
      chooseImage() {
        uni.chooseImage({
          count: 1,
          sizeType: ['compressed'],
          sourceType: ['album', 'camera'],
          success: (res) => {
            this.uploadAvatar(res.tempFilePaths[0])
          }
        })
      },
      
      // 上传头像
      uploadAvatar(filePath) {
        uni.showLoading({
          title: '上传中...'
        })
        
        uni.uploadFile({
          url: 'http://localhost:9090/updateAvatar',
          filePath: filePath,
          name: 'file',
          formData: {
            'id': this.userInfo.id
          },
          success: (res) => {
            uni.hideLoading()
            const data = JSON.parse(res.data)
            if (data.code === 1) {
              uni.showToast({
                title: '头像更新成功',
                icon: 'success'
              })
            } else {
              uni.showToast({
                title: data.msg,
                icon: 'none'
              })
            }
          },
          fail: (err) => {
            uni.hideLoading()
            console.log(err)
            uni.showToast({
              title: '上传失败',
              icon: 'none'
            })
          }
        })
      },
      
      // 加载用户信息
      loadUserInfo(uid) {
        uni.showLoading({
          title: '加载中...'
        })
        
        uni.request({
          url: 'http://localhost:9090/findOneUserInfo',
          method: 'GET',
          data: {
            id: uid
          },
          success: (res) => {
            uni.hideLoading()
            if (res.data.code === 1) {
              this.userInfo = res.data.user
            } else {
              uni.showToast({
                title: '获取用户信息失败',
                icon: 'none'
              })
            }
          },
          fail: (err) => {
            uni.hideLoading()
            console.log(err)
            uni.showToast({
              title: '网络请求失败',
              icon: 'none'
            })
          }
        })
      },
      
      // 更新用户信息
      updateUserInfo() {
        // 验证手机号
        if (this.userInfo.phone && !this.checkPhone(this.userInfo.phone)) {
          uni.showToast({
            title: '请输入正确的手机号码',
            icon: 'none'
          })
          return
        }
        
        uni.showLoading({
          title: '保存中...'
        })
        
        uni.request({
          url: 'http://localhost:9090/updateUser',
          method: 'POST',
          data: {
            id: this.userInfo.id,
            name: this.userInfo.name,
            password: this.userInfo.password,
            sex: this.userInfo.sex,
            birth: this.userInfo.birth,
            phone: this.userInfo.phone,
            sign: this.userInfo.sign
          },
          success: (res) => {
            uni.hideLoading()
            if (res.data.code === 1) {
              uni.showToast({
                title: '保存成功',
                icon: 'success'
              })
              setTimeout(() => {
                uni.navigateBack()
              }, 1500)
            } else {
              uni.showToast({
                title: res.data.msg,
                icon: 'none'
              })
            }
          },
          fail: (err) => {
            uni.hideLoading()
            console.log(err)
            uni.showToast({
              title: '网络请求失败',
              icon: 'none'
            })
          }
        })
      },
      
      // 验证手机号
      checkPhone(value) {
        return /^1[3|4|5|6|7|8][0-9]{9}$/.test(value)
      }
    }
  }
  </script>
  
  <style>
  .user-info-container {
    width: 100%;
    min-height: 100vh;
    background-color: #f8f9fc;
    display: flex;
    flex-direction: column;
  }
  
  /* 头部样式 */
  .header {
    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
    color: #fff;
    padding-bottom: 20rpx;
  }
  
  .status-bar {
    height: var(--status-bar-height);
  }
  
  .nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 88rpx;
    padding: 0 30rpx;
  }
  
  .left, .right {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .back-icon {
    width: 40rpx;
    height: 40rpx;
  }
  
  .title {
    font-size: 36rpx;
    font-weight: 500;
  }
  
  /* 头像区域样式 */
  .avatar-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -60rpx;
    margin-bottom: 40rpx;
  }
  
  .avatar-wrapper {
    position: relative;
    width: 160rpx;
    height: 160rpx;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  
  .avatar {
    width: 150rpx;
    height: 150rpx;
    border-radius: 50%;
  }
  
  .avatar-edit-icon {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60rpx;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .camera-icon {
    width: 32rpx;
    height: 32rpx;
  }
  
  .avatar-tip {
    font-size: 24rpx;
    color: #666;
    margin-top: 16rpx;
  }
  
  /* 表单区域样式 */
  .form-section {
    background-color: #fff;
    border-radius: 24rpx;
    margin: 0 30rpx;
    padding: 20rpx;
    box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.05);
  }
  
  .form-item {
    display: flex;
    padding: 30rpx 20rpx;
    border-bottom: 1rpx solid #f0f0f0;
  }
  
  .form-item:last-child {
    border-bottom: none;
  }
  
  .form-label {
    display: flex;
    align-items: center;
    width: 160rpx;
  }
  
  .form-icon {
    width: 36rpx;
    height: 36rpx;
    margin-right: 16rpx;
  }
  
  .label-text {
    font-size: 28rpx;
    color: #333;
  }
  
  .form-input {
    flex: 1;
    font-size: 28rpx;
    color: #333;
    text-align: right;
  }
  
  /* 性别选择器样式 */
  .gender-selector {
    flex: 1;
    display: flex;
    justify-content: flex-end;
  }
  
  .gender-option {
    display: flex;
    align-items: center;
    padding: 10rpx 30rpx;
    border-radius: 30rpx;
    margin-left: 20rpx;
    background-color: #f5f5f5;
    transition: all 0.3s;
  }
  
  .gender-option.selected {
    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
    color: #fff;
  }
  
  .gender-icon {
    width: 28rpx;
    height: 28rpx;
    margin-right: 10rpx;
  }
  
  /* 日期选择器样式 */
  .date-selector {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 10rpx 0;
    cursor: pointer;
  }
  
  .date-selector text {
    color: #333;
  }
  
  .arrow-icon {
    width: 28rpx;
    height: 28rpx;
    margin-left: 10rpx;
  }
  
  /* 个性签名样式 */
  .signature-item {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .signature-wrapper {
    width: 100%;
    margin-top: 20rpx;
    position: relative;
  }
  
  .signature-input {
    width: 100%;
    height: 180rpx;
    background-color: #f5f5f5;
    border-radius: 16rpx;
    padding: 20rpx;
    font-size: 28rpx;
    box-sizing: border-box;
  }
  
  .word-count {
    position: absolute;
    bottom: 10rpx;
    right: 20rpx;
    font-size: 24rpx;
    color: #999;
  }
  
  /* 按钮区域样式 */
  .button-section {
    padding: 40rpx 30rpx;
  }
  
  .save-btn {
    width: 100%;
    height: 88rpx;
    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
    color: #fff;
    font-size: 32rpx;
    border-radius: 44rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8rpx 16rpx rgba(37, 117, 252, 0.3);
    margin-bottom: 30rpx;
  }
  
  .cancel-btn {
    width: 100%;
    height: 88rpx;
    background-color: #f5f5f5;
    color: #666;
    font-size: 32rpx;
    border-radius: 44rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* 日期选择器弹窗样式 */
  .date-picker-popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  
  .date-picker-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
  }
  
  .date-picker-content {
    position: relative;
    background-color: #fff;
    border-top-left-radius: 24rpx;
    border-top-right-radius: 24rpx;
    overflow: hidden;
  }
  
  .date-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100rpx;
    padding: 0 30rpx;
    border-bottom: 1rpx solid #f0f0f0;
    background-color: #fff;
  }
  
  .date-picker-cancel {
    font-size: 30rpx;
    color: #666;
  }
  
  .date-picker-title {
    font-size: 32rpx;
    font-weight: 500;
    color: #333;
  }
  
  .date-picker-confirm {
    font-size: 30rpx;
    color: #2575fc;
    font-weight: 500;
  }
  
  .date-picker-body {
    background-color: #fff;
  }
  
  .date-picker-view {
    width: 100%;
    height: 400rpx;
  }
  
  .picker-item {
    line-height: 80rpx;
    text-align: center;
    font-size: 32rpx;
  }
  </style>